<script setup lang="ts" name="ChangeIllustrationsType">
import { storeToRefs } from 'pinia'
import { useSignStoreWithOut } from '@/store/modules/sign'
const { t } = useI18n() // 国际化
const signStore = useSignStoreWithOut()
const { activeIllustrationsType } = storeToRefs(signStore)

const typeMap = ref([
  { value: 'lake', name: t('sign.illustrations', 'title') + ' - ' + t('sign.illustrations.lake', 'name') },
  { value: 'star', name: t('sign.illustrations', 'title') + ' - ' + t('sign.illustrations.star', 'name') },
  { value: 'work', name: t('sign.illustrations', 'title') + ' - ' + t('sign.illustrations.work', 'name') },
  { value: 'unit', name: t('sign.illustrations', 'title') + ' - ' + t('sign.illustrations.unit', 'name') },
])

const getTypeName = () => {
  let res = ''
  typeMap.value.forEach((item) => {
    if (item.value === activeIllustrationsType.value) {
      res = item.name
    }
  })
  return res
}

const handleCommand = (v) => {
  activeIllustrationsType.value = v
  signStore.setIllustrationsTypeCache()
}

onMounted(() => {
  signStore.getIllustrationsTypeCache()
})
</script>

<template>
  <el-dropdown popper-class="login-template" class="!lt-md:hidden" @command="handleCommand">
    <span class="el-dropdown-link">
      <span class="text-span">{{ getTypeName() }}</span>
      <svg-icon class="el-icon--right" icon="ep:arrow-down" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in typeMap" :command="item.value" :class="activeIllustrationsType === item.value ? 'is-active' : ''">
          {{ item.name }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped lang="scss">
.el-dropdown-link {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;

  .text-span,
  .el-icon--right {
    color: var(--el-color-primary);
  }
}
</style>
